<!DOCTYPE html>
<html lang="zh"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>增加面试题(md版本)</title>
    <link rel="stylesheet" th:href="@{/plugins/hp-ui/hp-ui.css}" />
    <link rel="stylesheet" th:href="@{/css/base.css}" />
    <link rel="stylesheet" th:href="@{/css/interviewcase/add-interview.css}" />
    <!--    <link rel="stylesheet" href="/plugins/editor.md-master/css/style.css" />-->
    <link rel="stylesheet" href="/plugins/editor.md-master/css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />

    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/hp-ui/hp-ui.js}"></script>
    <script src="/plugins/jquery/jquery-3.4.1.min.js"></script>
    <script src="/plugins/editor.md-master/editormd.js"></script>
    <script type="text/javascript">
        var testEditor;

        $(function() {
            // You can custom @link base url.
            // editormd.urls.atLinkBase = "https://github.com/";

            testEditor = editormd("md-editor", {
                width     : "100%",
                height    : 720,
                toc       : true,
                //atLink    : false,    // disable @link
                //emailLink : false,    // disable email address auto link
                emoji     : true,
                todoList  : true,
                path      : '/plugins/editor.md-master/lib/',
                //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
                saveHTMLToTextarea: true,
                imageUpload: true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/upload/editormd/image",//注意你后端的上传图片服务地址
                theme        : "dark",//工具栏主题
                // previewTheme : "dark",//预览主题
                // editorTheme  : "pastel-on-dark",//编辑主题
                toolbarIcons : function() { // toolbarModes
                    return ["undo", "redo", "|",
                        "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                        "h1", "h2", "h3", "h4", "h5", "h6", "|",
                        "list-ul", "list-ol", "hr", "|",
                        "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|",
                        "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                        "help", "info", "|", "publish", "home"];
                },
                /*自定义功能按钮*/
                toolbarIconTexts :  {
                    publish: "<span bgcolor='gray'>发布</span>",
                    home: "<span bgcolor='red'>返回</span>"
                },
                toolbarHandlers : {
                    publish: function () {
                        submit();
                    },
                    home   : function () {
                        window.location.href = "/"
                    } 
                },
                onload: function(){
                    this.width("100%");
                    this.height(720);
                }
            });
        });

        function submit() {
            if(validation()) {
                alert(test)
                document.getElementById("case").submit()
            }
        }

        function validation() {
            if (!document.getElementById("type")) {
                alert("请选择文章类型")
                return false;
            }
            if (!document.getElementById("answer")) {
                alert("博客内容为空，不会提交")
                return false;
            }
        }
    </script>
</head>
<body>
<header th:replace="~{fragments/header :: header}">...</header>

<article>
    <form id="case" action="/case" method="post" onsubmit="return validation();">
        <!-- 标题 -->
        <div class="title-wrapper">
            <div class="hs-select-group">
                <p data-hp-id="type">请选择</p>
                <ul>
                    <li data-hp-val="1">Redis</li>
                    <li data-hp-val="2">Java</li>
                    <li data-hp-val="3">MySql</li>
                </ul>
            </div>
            <input type="hidden" id="type" name="type" />
            <input type="hidden" id="docType" name="docType" value="2" />
            <input type="text" name="question" class="hp-input" placeholder="题干，支持200个汉字"/>
        </div>

        <div id="md-editor">
        <textarea class="editormd-markdown-textarea" id="answer" name="answer"
                  style="display:none;" ></textarea>
            <textarea class="editormd-html-textarea" id="answerHtml" name="answerHtml"></textarea>
        </div>
        <button class="hp-btn" type="submit">保存</button>
    </form>
</article>

</body>
</html>